<template>
  <div>
    <div v-for="app in apps" :key="app.Value" class="appList">
      <span class="title">{{ app.Text }}</span>
      <div class="body">
        <div v-for="item in app.AppList" :key="item.Id" class="app">
          <span class="name">{{ item.AppName }}</span>
          <div class="btn">
            <el-link @click="createFlow(item)">发起流程>></el-link>
          </div>
        </div>
      </div>
    </div>
    <createAppAudit :app-id="id" v-model:visible="visible" />
  </div>
</template>

<script>
import { GetList } from '@/flow/api/flowApp'
import { createAppAudit } from '@/flow/components/audit/'
export default {
  components: {
    createAppAudit
  },
  data() {
    return {
      apps: [],
      id: null,
      visible: false
    }
  },
  computed: {},
  mounted() {
    this.load()
  },
  methods: {
    async load() {
      const list = await GetList(0)
      this.apps = list
    },
    createFlow(row) {
      this.id = row.Id
      this.visible = true
    }
  }
}
</script>
<style scoped>
.appList {
  width: 100%;
  margin-top: 20px;
  padding: 30px;
}
.appList .title {
  display: inline-block;
  width: 100%;
  line-height: 30px;
  text-indent: 10px;
  border-left: 3px solid #409eff;
  border-bottom: 1px solid #99999991;
}
.appList .body {
  width: 100%;
  display: inline-block;
  padding: 5px;
}
.appList .app {
  float: left;
  width: 200px;
  height: 100px;
  border-top: 8px solid #46c26f;
  padding: 3px;
  border-radius: 6px;
  margin: 10px 20px 10px 0;
}
.appList .app .name {
  line-height: 40px;
  font-size: 14px;
  display: inline-block;
  width: 100%;
}
.appList .app .btn {
  text-align: right;
  padding: 5px;
  line-height: 30px;
}

.appList .app .btn .el-link {
  color: #409eff;
}
</style>
